<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Frosted glass 磨砂玻璃</title>
    <style type="text/css">
        * {
            font-size: 16px;

            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            border: none;
            background-color: transparent;
            -webkit-tap-highlight-color: transparent;
            font-family: "Microsoft YaHei", "微软雅黑", consolas,  Heiti, "黑体", Arial, Helvetica, STHeiTi, sans-serif;
        }
        a {
            text-decoration: none;
            display: inline;
            width: 100%;
            font-size: inherit;
        }

        /* 绝对定位-水平垂直居中 */
        .AbsHorizontalVerticalCenter {
            display: block;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

            position: absolute;
        }

        .main:before,
        .main:after,
        .body {
            background-attachment:fixed;
            background-repeat: no-repeat;
            background-clip: border-box;
            background-position: center;
            background-size: auto;
        }
        .body {
            display: block;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url(https://ytsimg.gitee.io/blog/yts_github_io/html/bg.jpg);
        }
        .main {
            display: block;
            position: absolute;
            overflow: hidden;

            width: 50%;
            height: auto;

            padding: 2em 3em;
            font-size: 1.5em;
            border-radius: .3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                        0 .5em 1em rgba(0, 0, 0, 0.6);
                        /*0 .5em 1em hsla(0,0%,100%,.6);*/
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
        }
            .main:before,
            .main:after {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .main:before {
                /* hsl 模式背景透明 */
                background: hsla(0,0%,100%,.3);
                z-index: -2;
            }
            .main:after {
                margin: -4em;
                background-image: url(https://ytsimg.gitee.io/blog/yts_github_io/html/bg.jpg);
                -webkit-filter: blur(15px);
                filter: blur(15px);
                z-index: -1;
            }
            .main p {
                font-size: 1.2em;
                line-height: 1.2em;
                color: #fff;
                color: #000;
            }
    </style>
</head>
<body>
    <div class="body">
        <div class="main AbsHorizontalVerticalCenter">
            <p style="color: #fff">
                case text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <br/>
            <p style="color: #000">
                case text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <br/>
            <p>
                实例使用了 filter: blur(15px); 高斯模糊用于只做磨砂玻璃效果<br/>
                学习借鉴:
                <a target="_blank" href="https://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html">CSS秘密花园:磨砂玻璃效果</a>,
                <a target="_blank" href="https://blog.csdn.net/crper/article/details/50462812">CSS3打造磨砂玻璃的背景</a>
            </p>
        </div>
    </div>
</body>
</html>
